<template>
  <el-row>
    <el-col>
      <el-card>
        <!--搜索框开始-->
        <el-row :gutter="20">
          <el-col :span="8">
          </el-col>
          <el-col :span="16">
            <div class="m-4">
              <div class="block" style="float: right; margin-right: 10px;">
                <el-select
                    v-model="condition.status"
                    placeholder="请选择用户状态"
                    clearable
                    :value-on-clear=null
                    style="width: 150px"
                    @change="selectByPage(1)"
                >
                  <!--0:未认证，1：已认证 2:禁用 3:注销-->
                  <el-option   label="未认证" value="0" />
                  <el-option  label="已认证" value="1" />
                  <el-option  label="禁用" value="2" />
                  <el-option  label="注销" value="3" />
                </el-select>
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.username"
                    placeholder="请输入用户名"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.phone"
                    placeholder="请输入手机号"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.email"
                    placeholder="请输入邮箱"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.realname"
                    placeholder="请输入真实姓名"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <!--搜索框结束-->
        <!--表格开始-->
        <el-table :data="pageInfo.list" border style="width: 100%;">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="realname" label="真实姓名" />
          <el-table-column prop="idCard" label="身份证号" />
          <el-table-column prop="regTime" label="注册时间" />
          <el-table-column prop="money" label="账号余额" />
          <el-table-column prop="status" label="用户状态">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 0" type="warning">未认证</el-tag>
              <el-tag v-else-if="scope.row.status == 1" type="success">已认证</el-tag>
              <el-tag v-else-if="scope.row.status == 2" type="danger">禁用</el-tag>
              <el-tag v-else-if="scope.row.status == 3" type="info">注销</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-popconfirm
                  title="你确定要禁用该用户吗？"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  @confirm="deleteUser(scope.row.id)"
              >
                <template #reference>
                  <el-button style="margin-bottom: 10px;" type="danger">禁用</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--表格结束-->
        <!-- 分页开始 -->
        <el-row class="row-bg" justify="center">
          <el-pagination background layout="prev, pager, next"
                         :page-count="pageInfo.pages"
                         @update:current-page="selectByPage"
                         style="margin-top: 10px;"
                         v-model:current-page="pageInfo.pageNum" />
        </el-row>
        <!-- 分页结束 -->
      </el-card>
    </el-col>
  </el-row>
  <!-- 修改管理员对话框结束 -->
  <el-dialog v-model="UpdateDislogShow" title="新增分类" width="500">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="adminUpdate.username" autocomplete="off" placeholder="请输入用户名" style="width: 240px" />
      </el-form-item>
      <el-form-item label="手机号" label-width="20%">
        <el-input  v-model="adminUpdate.phone" autocomplete="off" placeholder="请输入手机号" style="width: 240px" />
      </el-form-item>
      <el-form-item label="邮箱号" label-width="20%">
        <el-input  v-model="adminUpdate.email" autocomplete="off" placeholder="请输入邮箱号" style="width: 240px" />
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input  v-model="adminUpdate.realname" autocomplete="off" placeholder="请输入真实姓名" style="width: 240px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="UpdateDislogShow = false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改管理员对话框结束 -->
</template>

<script setup>
import categoryApi from "@/api/categoryApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import adminApi from "@/api/adminApi.js";
import UserApi from "@/api/userApi.js";
import userApi from "@/api/userApi.js";
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//搜索条件
const condition = ref({
  username: null,
  phone: null,
  realname: null,
  email: null,
  status: null
});
//分页的信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
//请求所有的数据
const selectByPage = (PageNum) => {
  userApi.selectByPage(condition.value, PageNum, 10)
      .then(resp => {
        pageInfo.value =resp.data
      })
}
//禁用用户状态
const deleteUser = (id)=>{
  userApi.delete(id)
      .then(resp =>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(1)
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
selectByPage(1)
</script>

<style scoped>

</style>